<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <button @click="sayHello">说话</button>&nbsp;<button @click="welcome">欢迎</button><br>
  <button @click="test1">测试一下在vue2配置中读取vue3的配置(可以读)</button>&nbsp;
  <button @click="test2">测试一下在vue3配置中读取vue2的配置(不能读)</button>
</template>

<script>
//引入渲染函数
import {h} from 'vue'
export default {
  name: 'App',
  data() { //vue3依然兼容vue2的写法，但是不建议混用vue2和vue3写法
    return {
      sex: '男',
    }
  },
  methods: {
    welcome() {
      alert('欢迎欢迎')
    },
    test1() {
      console.log('vue2:', this.sex)
      console.log('vue3:', this.name)
      console.log('vue3:', this.age)
      console.log('vue3:', this.sayHello)
    }
  },
  setup() { //vue3提供了一个新配置项setup，其值为一个函数；原来的data、methods、computed等配置项全部写到setup中
    //这里的写法先不考虑响应式，另外setup不能加async

    //直接定义变量，相当于data
    let name = '张三'
    let age = 18

    //直接定义方法，相当于methods
    function sayHello() {
      alert(`你好啊，我叫${name}，今年${age}岁了。`)
    }

    function test2() {
      console.log('vue3:', this.name)
      console.log('vue3:', this.age)
      console.log('vue3:', this.sayHello)
      console.log('vue2:', this.sex)
      console.log('vue2:', this.welcome)
    }
    
    //第一种写法（常用），setup返回一个对象，其属性都可以在模板中使用
    return {
      name,
      age,
      sayHello,
      test2,
    }

    //第二种写法，setup返回一个渲染函数，模板直接展示渲染函数的返回值
    /*
    return ()=>{
      return h('h1', '这是一个渲染的标题') //简写 return ()=>h('h1', '这是一个渲染的标题')
    }
    */
  }
}
</script>

<style>
</style>
